import React, { memo} from "react";
import { useDispatch, useSelector } from "react-redux";
import { changeAll ,setList} from "../store/goods";
const Footer = memo(() => {
  const List = useSelector((state) => state.goods.newList);
  const dispatch = useDispatch();
  return (
    <div className="foot">
      <div className="left">
        <input
          type="checkbox"
          checked={List.every((item) => item.isDone)}
          onChange={(e) => {
            dispatch(changeAll(e.target.checked));
          }}
        />
        <span>
          已完成{List.filter((item) => item.isDone).length}/{List.length}
        </span>
      </div>
      <div className="right">
        <span onClick={()=>{dispatch(setList(1))}}>全部</span>
        <span onClick={()=>{dispatch(setList(2))}}>已完成</span>
        <span onClick={()=>{dispatch(setList(3))}}>未完成</span>
      </div>
    </div>
  );
});

export default Footer;
